<style lang="less">
.page-templets{
    .main .main-form{
        width: 54%;
    }

    .text-help{
        margin: 0;
        font-size: 12px;
        line-height: 1;
        color: #B4B4B4;
    }

    .label-add{
        margin-top: 5px;
        border:1px #B4B4B4 solid;
    }
    .label-edit-header {
        padding: 10px;
        display: inline-block;
    }
    .label-edit-input {
        margin-left: 10px;
        width: 250px;
    }
    .keyword-button {
         margin: 5px;
    }
    .keyword-button-show:hover {
        background-color: #00dbff
    }
    .keyword-button-delete {
        top: -15px;
        position: relative;
        right: -20px;
        color: red;
    }
    
}
.confirm-btn {
    text-align: center;
    margin-top: 30px;
    margin-left: 50%
}

.confirm-span {
    text-align: center;
    margin-top: 30px;
    margin-left: 80%;
    font-size: 20px;
}
.ime-disabled {
    ime-mode: disabled;
}
</style>
<template>
    <div class="main page-font">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/check/log' }">验票记录</el-breadcrumb-item>
                <el-breadcrumb-item>前台验票</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/front-log' }">前台验票</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <el-form class="main-form" label-width="100px" :model="itemModel" @submit.native.prevent="addApply()">
            <el-form-item label="票券编号">
                <el-input class="ime-disabled" autofocus v-model="itemModel.ticket_no"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addApply">添加到列表</el-button>
            </el-form-item>
        </el-form>
        <el-table
            border
            :data="tickets"
            >
            <el-table-column label="票券大类" inline-template>
                <div>
                    {{row.parent.name}}
                </div>
            </el-table-column>
            <el-table-column label="票券类型" inline-template>
                <div>
                   {{row.types.name}}
                </div>
            </el-table-column>
            <el-table-column label="客户" inline-template>
                <div>
                    {{row.customer ? row.customer.name : '-'}}
                </div>
            </el-table-column>
            <el-table-column prop="ticket_no" label="编号"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="b_percent" label="差价">
                <!-- <div>
                    <div v-if="row.b_percent > 0">
                        ￥{{(row.b_percent / 100) * row.price}}
                    </div>
                    <div v-if="row.b_percent === 0">
                        ￥0
                    </div>
                </div> -->
            </el-table-column>
            <el-table-column label="操作" inline-template>
                <div class="item-menus">
                    <el-button size="small" type="danger" @click="deleteItem(row)">删除</el-button>
                </div>
            </el-table-column>
        </el-table>
        <el-row>
            <span class="confirm-span">总计：￥ {{total}}</span>
        </el-row>
        <el-row>
            <el-button class="confirm-btn" :loading="loading" native-type="submit" type="primary" @click="confirmApply">提交验票</el-button>
        </el-row>
    </div>
</template>

<script>
import lodash from 'lodash';
import ItemController from '../controllers/item';

import Ticket from '../models/ticket';
import AttributeModel from '../models/attribute';
import TypeModel from '../models/type';
import CustomModel from '../models/customer';
import Apply from '../models/apply';
import { debug } from 'util';


export default new ItemController({
    data() {
        return {
            itemModel: {
                ticket_no: '',
            },
            total: 0,
            tickets: [],
            loading: false,
        };
    },
    methods: {
        addApply() {
            for(let i = 0; i < this.tickets.length; i++) {
                if(this.tickets[i].ticket_no === this.itemModel.ticket_no) {
                    return;
                }
            }
            return Ticket.get({
                id: 0,
                ticket_no: this.itemModel.ticket_no,
                type: 'front'
            })
            .$promise
            .then(data => {
                this.itemModel.ticket_no = '';
                data.status = Ticket.USED;
                this.total = 0;

                this.tickets.push(data);

                if(data.b_percent && data.b_percent > 0) {
                    this.$confirm('需要补差价')
                    .then(() => {
                        this.tickets.map(item => {
                            this.total += item.price;
                            this.total += item.b_percent;
                        });
                    });
                }else {
                    this.tickets.map(item => {
                        this.total += item.price;
                        this.total += item.b_percent;
                    });
                }
            })
            .catch(err => {
                this.itemModel.ticket_no = '';
            });
        },
        confirmApply() {
            return this.$confirm('确认提交验票')
            .then(() => {
                return Ticket.update({
                    id: 0,
                    tickets: this.tickets,
                    type: 'front',
                    operation: '前台验票'
                })
                .$promise
                .then(() => {
                    this.tickets = [];
                    this.total = 0;
                });
            });
        },
        afterSave() {
            this.$message.success('保存成功');

            // this.$router.back();
        },
        deleteItem(row) {
            this.$confirm('确认移除该条')
            .then(() => {
                for(let i = 0; i < this.tickets.length; i++) {
                    if(this.tickets[i].id === row.id) {
                        if(this.tickets.length === 1) {
                            this.tickets = [];
                        }
                        else {
                            this.tickets.splice(i, 1);
                        }
                        break;
                    }       
                }
                this.total = 0;

                this.tickets.map(item => {
                    this.total += this.total;
                    this.total += data.b_percent;
                });
            });
        }
    },
    watch: {
        'itemModel.grand_id': {
            deep: true,
            handler(newVal, oladVal) {
                console.log(newVal, oladVal)
                return this.loadParents(newVal);
            }
        }
    }
});
</script>
